import React, { PureComponent } from 'react';
import moment from 'moment';
import { Button, Anchor, Row, Col, message, Spin } from 'antd';
import { connect } from 'dva';
import FooterToolbar from '@/components/FooterToolbar';
import EmpInfor from '../../SocialManage/AddEmpSocial/EmpInfor';
import SocialAccuInfor from '../../SocialManage/AddEmpSocial/SocialAccuInfor';
import HdlRemark from '@/pages/components/HdlRemark';
import MatInfor from '../../SocialManage/AddEmpSocial/MatInfor';
import ServiceRemark from '../../components/ServiceRemark';
import EmpUpdateModle from '../../SocialManage/AddEmpSocial/EmpUpdateModle';
import SingleModal from '../../SocialManage/AddEmpSocial/SingleModal';
import ContactInfor from '../../SocialManage/AddEmpSocial/ContactInfor';
import PageHeaderWrapper from '@/components/PageHeaderWrapper'; // 引入头部组件
import ProRecording from '@/pages/components/Problem/ProblemPage/ProRecording';

const { Link } = Anchor;
@connect(({ addempaccu, loading }) => ({
  addempaccu,
  loading: loading.models.addempaccu,
}))
class DetailInfor extends PureComponent {
  constructor(props) {
    super(props);
    this.state = { visHdlRemark: false, visUpdate: false, bigShow: false };
  }

  componentDidMount() {
    const { dispatch, location } = this.props;
    const { id } = location.query;
    dispatch({
      type: 'addempaccu/getInfor',
      payload: { addDetId: id },
    });
    // 字典
    dispatch({
      type: 'addempaccu/getDict',
      payload: { addDetId: id },
    });
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    const permars = {
      detail: {
        sendInfoDetDto: {},
        persion: {},
        mkupPayDets: [],
        accuOrdYmDets: [],
        accuRemarks: [],
        matSubs: [],
      },
      insData: [],
      remarkData: [],
      singleInfo: {},
      dictData: { addDetInfoList: [{ suppAccuAccos: [] }], addTypes: [], joinDtos: [] },
    };
    dispatch({
      type: 'addempaccu/upDate',
      payload: permars,
    });
  }

  visUpdateModle = flag => {
    this.setState({
      visUpdate: !!flag,
    });
  };

  updateInfo = () => {
    this.visUpdateModle(true);
    const { dispatch, location } = this.props;
    const { id } = location.query;
    dispatch({
      type: 'addempaccu/getIns',
      payload: { addDetId: id },
    });
  };

  // 提交数据
  submitUpdateData = values => {
    const {
      dispatch,
      location,
      addempaccu: { detail },
    } = this.props;
    const { id } = location.query;
    const returnedTarget = Object.assign(values, {
      beginDateYM: moment(values.beginDateYM).format('YYYYMMDD'),
      declareAccuId: values.declareAccuId,
    });

    dispatch({
      type: 'addempaccu/updateIns',
      payload: { ...returnedTarget, addDetId: id, taskId: detail.persion.taskId },
      callback: response => {
        if (response) {
          dispatch({
            type: 'addempaccu/getInfor',
            payload: { addDetId: id },
          });
          message.success('修改成功！');
          this.visUpdateModle();
        } else {
          message.warning(`${response.message || '修改失败！'}`);
        }
      },
    });
  };

  handleModalVisible = flag => {
    this.setState({
      visHdlRemark: !!flag,
    });
  };

  addHdlRemark = () => {
    this.handleModalVisible(true);
    const {
      dispatch,
      addempaccu: {
        detail: { persion },
      },
    } = this.props;
    dispatch({
      type: 'addempaccu/getRemark',
      payload: { sendId: persion.sendId, busiId: persion.accuEmpOrdId },
    });
  };

  // 提交数据
  submitData = values => {
    const { dispatch, location } = this.props;
    const { id } = location.query;
    dispatch({
      type: 'addempaccu/addHdlRemark',
      payload: { ...values, busiId: id },
      callback: response => {
        if (response) {
          message.success('办理备注成功！');
          this.handleModalVisible();
        } else {
          message.warning(`${response.message || '办理备注失败！'}`);
        }
      },
    });
  };

  close = () => {
    window.history.back();
  };

  setSingleModalShow = persion => {
    this.setState({ bigShow: true });
    const { dispatch } = this.props;
    dispatch({
      type: 'addempaccu/getSingle',
      payload: { custAccuAccoId: persion.accuAccoId },
    });
  };

  bigHandleOk = () => {
    this.setState({ bigShow: false });
  };

  bigHandleCancel = () => {
    this.setState({ bigShow: false });
  };

  render() {
    const {
      loading,
      addempaccu: { detail, dictData, insData, remarkData, singleInfo },
    } = this.props;
    const { persion } = detail;
    const { visUpdate, visHdlRemark, bigShow } = this.state;
    return (
      <div>
        <PageHeaderWrapper>
          <Spin tip="Loading..." spinning={loading}>
            <Anchor onClick={e => e.preventDefault()} targetOffset={50}>
              <Row type="flex" justify="space-around">
                <Col>
                  <Link href="#sendInfor" title="派单信息" />
                </Col>
                <Col>
                  <Link href="#basicma" title="基本信息" />
                </Col>
                <Col>
                  <Link href="#socialInfor" title="公积金信息" />
                </Col>
                <Col>
                  <Link href="#materialInfor" title="材料信息" />
                </Col>
                <Col>
                  <Link href="#contactRecord" title="联系记录" />
                </Col>
                <Col>
                  <Link href="#hdlRemark" title="办理备注" />
                </Col>
                <Col>
                  <Link href="#proRecording" title="问题记录" />
                </Col>
              </Row>
            </Anchor>
            <EmpInfor sendInfoDetDto={detail.sendInfoDetDto} persion={detail.persion} />
            <SocialAccuInfor
              social={2}
              addEmp={1}
              persion={detail.persion}
              sendInfoDetDto={detail.sendInfoDetDto}
              assData={detail.accuOrdYmDets}
              payData={detail.mkupPayDets}
              updateInfo={this.updateInfo}
              setSingleModalShow={this.setSingleModalShow}
            />
            <MatInfor matSubs={detail.matSubs} persion={detail.persion} />
            <ContactInfor entryContRcrds={detail.entryContRcrds} />
            <HdlRemark hdlRemark={detail.accuRemarks} />
            <ProRecording proRecording={detail.probDets} />
            <ServiceRemark
              visHdlRemark={visHdlRemark}
              handleModalVisible={this.handleModalVisible}
              submitData={this.submitData}
              detailHdl={remarkData}
            />
          </Spin>
          <EmpUpdateModle
            addEmp={1}
            social={2}
            visUpdate={visUpdate}
            visUpdateModle={this.visUpdateModle}
            submitUpdateData={this.submitUpdateData}
            dictData={dictData}
            insData={insData}
          />
          <SingleModal
            dataInfo={singleInfo}
            visible={bigShow}
            onOk={this.bigHandleOk}
            onCancel={this.bigHandleCancel}
          />
          <FooterToolbar>
            {/* 待申报、申报中、已申报、申报失败显示添加办理备注按钮。 */}
            {persion.execState === 8 ? null : (
              <Button style={{ marginLeft: 8 }} onClick={this.addHdlRemark}>
                添加办理备注
              </Button>
            )}
            <Button style={{ marginLeft: 8 }} onClick={this.close}>
              返回
            </Button>
          </FooterToolbar>
        </PageHeaderWrapper>
      </div>
    );
  }
}

export default DetailInfor;
